<template>
  <div class="banner" >
    <ul :style="{marginLeft:val+'px'}">
      <li v-for="(img,index) in imgs" :key="index">
        <img :src="img" />
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Banner",
  data() {
    return {
      imgs : [],
      val:0,
      myTimer:null
    };
  },
  methods:{},
  created() {
    axios
    .get("http://localhost:3000/bannerImgs")
    .then((res) => {
      this.imgs = res.data;
      this.$nextTick(()=>{
        setInterval(()=>{
          this.val = this.val - 350;
          if(this.val == -2450){
              this.val = 0
          }
        },4000)
      })
    })
    .catch((err) => {
      console.log("服务器出错了", err);
      alert("服务器出错了");
    });
  },
  
};


</script>

<style scoped>
.banner {
  width: 3.5rem;
  height: 1.6rem;
  margin: 0.1rem auto;
  overflow: hidden;
}
.banner ul {
  list-style: none;
  width: 700%;
  height: 100%;
}
.banner ul li {
  float: left;
  width: 3.5rem;
  height: 100%;
}
.banner ul li img {
  width: 3.5rem;
  height: 100%;
}
</style>
